<template>
  <div class="home-container">
    <van-nav-bar title="头条" fixed />

    <!-- 导入，注册，并使用ArticaleInfo组件 -->
    <!-- 在使用组建的时候，如果某个属性名是”小驼峰“形式，
      则绑定属性的时候建议改成连字符形式，如cmtCount ==> cmt-count -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ArticleInfo v-for="item in artlist" :key="item.id" :title="item.title" :author="item.aut_name" :cmt-count="item.comm_count" :pubdate="item.pubdate" :cover="item.cover"> </ArticleInfo>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入request.ji
// import request from '@/utils/request.js'
import { getArticleListAPI } from '@/api/articleApi.js'
// 导入ArticleInfo组件
import ArticleInfo from '@/components/article/ArticleInfo.vue'
export default {
  name: 'touTHome',
  data() {
    return {
      // 页码值
      page: 1,
      // 每页显示多少条数据
      limit: 10,
      // 文章的数组
      artlist: [],
      // 是否正在加载下一页数据，如果loading为true，则不会反复触发load事件
      // 每当下一页数据请求回来之后，一定要把true改回false
      loading: true,
      // 所有数据是否加载完毕了，如果没有更多数据了，一定要把finished改成true
      finished: false,
      // 是否正在下拉刷新
      refreshing: false,
    }
  },
  created() {
    this.initArticleList()
  },
  methods: {
    // 封装获取文章列表数据的方法
    async initArticleList(isFefresh) {
      // 发起GET请求，获取文章的列表数据
      const { data: res } = await getArticleListAPI(this.page, this.limit)
      console.log(res)
      if (isFefresh) {
        // 是下拉刷新，头部拼接
        //如果是上拉加载更多，那么应该是
        // this.artlist = [新数据在前，旧数据在后]
        this.artlist = [...res, ...this.artlist]
        this.refreshing = false
      } else {
        // 是上拉刷新，尾部拼接
        //如果是上拉加载更多，那么应该是
        // this.artlist = [旧数据在前，新数据在后]
        this.artlist = [...this.artlist, ...res]
        this.loading = false
      }

      if (res.length === 0) {
        // 证明没有下一页数据了，直接把finished改为true，表示数据加载完毕
        this.finished = true
      }
    },
    onLoad() {
      console.log('触发了load事件')
      // 1.让页码值+1
      this.page++
      // 2.重新请求接口获取数据
      this.initArticleList()
    },
    // 下拉刷新的处理函数
    onRefresh() {
      console.log('下拉刷新')
      // 1.让页码值+1
      this.page++
      // 2.重新请求接口获取数据
      this.initArticleList(true)
    },
  },
  components: {
    ArticleInfo,
  },
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;
  /*  .van-nav-bar {
    background-color: #007bff;
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  } */
}
</style>
